import React, { memo, Suspense } from "react";
import type { FC, ReactNode } from "react";
import { Outlet } from "react-router-dom";
import NavTabs from "./NavDiscoverTabs";


interface IProps {
    children?: ReactNode
}

const Discover: FC<IProps> = () => {
    return (
        <div>
            <div><NavTabs /></div>
            {/* 懒加载导致组件刷新，为了用户体验，在Outlet 处增加 Suspense 则在需要下载的子组件进行懒加载数据 而不是整个App 的 Suspense 处进行重新更新*/}
            <div><Suspense fallback="">
                <Outlet></Outlet>
            </Suspense></div>
        </div>
    )
}

export default memo(Discover)